<template>
    <!-- 单元格容器，根据属性动态添加padding类名，并绑定点击事件 -->
    <view :class="[ns.b(), ns.is('padding-x', paddingX), ns.is('padding-y', paddingY)]" @click="onEvent">
        <!-- 内容区域采用flex布局 -->
        <view class="flex">
            <!-- 左侧标题区域 -->
            <view class="i-cell-lf">
                <!-- 标题插槽，可自定义标题内容，默认显示图标和文本 -->
                <slot name="title">
                    <view class="i-cell-title">
                        <view class="icon" v-if="icon">
                            <!-- 显示图标，图标类型由props.icon控制 -->
                            <uni-icons :type="icon" size="20" />
                        </view>
                        <!-- 显示标题文本 -->
                        <text>{{ title }}</text>
                    </view>
                </slot>
            </view>
            <!-- 右侧内容区域 -->
            <view class="i-cell-lr">
                <!-- 默认插槽，用于放置主要内容 -->
                <slot />
                <!-- 链接指示箭头，当isLink为true时显示 -->
                <view class="more" v-if="isLink">
                    <uni-icons type="right" color="#999" />
                </view>
            </view>
        </view>
        <!-- 副标题区域，当subtitle存在时显示 -->
        <view class="i-cell-subtitle" v-if="subtitle">
            {{ subtitle }}
        </view>
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("cell");

/**
 * 组件属性定义
 * @property {Boolean} paddingY - 是否添加垂直方向padding，默认为true
 * @property {Boolean} paddingX - 是否添加水平方向padding，默认为false
 * @property {String} icon - 图标类型，默认为"locked"
 * @property {String} title - 标题文本，默认为空字符串
 * @property {String} subtitle - 副标题文本，默认为空字符串
 * @property {Boolean} isLink - 是否显示链接箭头，默认为true
 * @property {String} link - 跳转链接地址，默认为空字符串
 */
const props = defineProps({
    paddingY: {
        type: Boolean,
        default: true
    },
    paddingX: {
        type: Boolean,
        default: false
    },
    icon: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },
    subtitle: {
        type: String,
        default: ""
    },
    isLink: {
        type: Boolean,
        default: true
    },
    link: {
        type: String,
        default: ""
    }
});

/**
 * 处理点击事件函数
 * 当link属性不为空时，跳转到指定页面
 * @returns {void}
 */
const onEvent = () => {
    if (props.link !== "") {
        uni.navigateTo({
            url: props.link
        });
    }
};
</script>

<style lang="scss" scoped>
@import "./index";
</style>
